<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px" type="flex" justify="start">
      <el-button
        type="primary"
        size="mini"
        @click="linkTo"
      >
       添加房源
      </el-button>
      <el-button
        type="primary"
        size="mini"
        @click="viewDetail"
        :disabled="disabled"
        >详 情</el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="getRoomsInfo"
        :disabled="disabled"
        >修改房源</el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="checkYz"
        :disabled="disabled"
        >估价资料A</el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="searchSignIn"
        class="ml10"
        :disabled="!currentHID"
        >房间资料</el-button
      >
      <el-button
        type="primary"
        size="mini"
        @click="printPaper"
        :disabled="disabled"
        class="ml10"
        >打印估价单</el-button
      >
    </el-row>
    <el-divider content-position="right">价格确定-基本信息-房源列表</el-divider>
    <el-form
      :model="queryParams"
      ref="queryForm"
      style="margin-top: 20px"
      :inline="true"
      @submit.native.prevent
    >
      <el-form-item label="业务编号" prop="EID">
        <el-input
          v-model="queryParams.EID"
          placeholder="业务编号"
          clearable
          size="small"
          style="width: 130px"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="原承租人" prop="FormerRenter">
        <el-input
          v-model="queryParams.FormerRenter"
          placeholder="原承租人"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="连锁店"
        class="label__red"
        size="small"
        prop="HMultipleShop"
      >
        <el-select
          v-model="queryParams.HMultipleShop"
          placeholder="请选择"
          style="width: 140px"
          filterable
          ref="HMultipleShop"
          @keyup.enter.native="handleQuery"
          @change="handleQuery"
          :disabled="shopDisabled"
        >
          <el-option
            v-for="item in dict_multiple_shop"
            :key="item.MName"
            :label="item.MName"
            :value="item.MID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房屋区域" size="small" prop="HDistrict">
        <el-select
          v-model="queryParams.HDistrict"
          placeholder="请选择"
          style="width: 90px"
          clearable
          filterable
          ref="HDistrict"
          @keyup.enter.native="handleQuery"
          @change="handleQuery"
        >
          <el-option
            v-for="item in dict_district"
            :key="item.DName"
            :label="item.DName"
            :value="item.DID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产别" size="small" prop="PropertyRight">
        <el-select
          v-model="queryParams.PropertyRight"
          placeholder="请选择"
          style="width: 120px"
          clearable
          filterable
          ref="PropertyRight"
          @keyup.enter.native="handleQuery"
          @change="handleQuery"
        >
          <el-option
            v-for="item in dict_property_right"
            :key="item.PID"
            :label="item.PName"
            :value="item.PName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门牌号" prop="Doorplate">
        <el-input
          v-model="queryParams.Doorplate"
          placeholder="门牌号"
          clearable
          size="small"
          style="width: 130px"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="估价目的" size="small" prop="EPurpose">
        <el-select
          v-model="queryParams.EPurpose"
          placeholder="请选择"
          style="width: 150px"
          clearable
          filterable
          ref="EPurpose"
          @keyup.enter.native="handleQuery"
          @change="handleQuery"
        >
          <el-option
            v-for="item in dict_evaluate_purpose"
            :key="item.PID"
            :label="item.PName"
            :value="item.PName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入日期">
        <el-date-picker
          v-model="signUpTime"
          type="daterange"
          range-separator="-"
          unlink-panels
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="small"
          style="width: 240px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-alert title="点击业务编号，可复制业务编号!" type="success"></el-alert>
    <el-table :data="houseList" v-loading="loading">
      <el-table-column
        :width="width"
        label="业务编号"
        :show-overflow-tooltip="true"
        align="right"
      >
        <template slot-scope="scope">
          <el-radio
            v-model="currentRow"
            v-clipboard:copy="scope.row.EID"
            :label="scope.row.EID"
            @change.native="handleSelectionChange(scope.row)"
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        prop="District"
        label="房屋区域"
        width="auto"
        align="center"
      />
      <el-table-column
        prop="Doorplate"
        label="门牌"
        width="220px"
        align="left"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="PropertyRight"
        label="产别"
        align="center"
        width="80"
      />
      <el-table-column prop="Square" label="面积" align="center" width="80">
        <template slot-scope="scope">{{ scope.row.Square | shift0 }}</template>
      </el-table-column>
      <el-table-column
        prop="FormerRenter"
        label="原承租人"
        align="center"
        width="auto"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="State"
        label="估价状态"
        width="auto"
        :show-overflow-tooltip="true"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="EPurpose"
        label="估价目的"
        width="auto"
        align="center"
      ></el-table-column>
      <el-table-column
        label="连锁店"
        prop="HMultipleShopName"
        width="auto"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="置换类型"
        prop="hmetatype"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="置换单审核状态"
        prop="BState"
        width="130"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        label="预约看房时间"
        prop="ebookedtime"
        width="120"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template slot-scope="scope">
          <el-row style="flex-direction: column; display: flex">
            <router-link
              :to="'/JgqdBaseInfo/JgqdHouseEdit?HID=' + scope.row.HID"
            >
              <el-button
                size="mini"
                type="warning"
                >修改</el-button
              >
            </router-link>

            <router-link
              :to="
                '/JgqdBaseInfo/jgqdHouseCheck?type=check&HID=' + scope.row.HID
              "
            >
              <el-button
                size="mini"
                type="success"
                style="margin-left: 0; margin-top: 5px"
                >审核</el-button
              >
            </router-link>

            <el-button
              size="mini"
              type="primary"
              style="margin-left: 0; margin-top: 5px"
              @click="handleEdit(scope.row, 'change')"
              >业务转换</el-button
            >
            <el-button
              size="mini"
              type="danger"
              style="margin-left: 0; margin-top: 5px"
              @click="handleEdit(scope.row, 'back')"
              >评估退回</el-button
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" class="mt10" justify="end">
      <el-pagination
        background
        style="margin: 20px 0"
        layout="prev, pager, next, jumper"
        :total="total"
        :hide-on-single-page="true"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
    <!-- <Yanzi ref="yanzi" /> -->
    <!-- <RoomInformation
      @changeRoomInformationState="changeRoomInformationState"
      ref="room"
    /> -->
    <el-dialog
      title="业务转换"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form :model="form" ref="businessChange" :rules="rules">
        <el-form-item
          label="业务转换"
          :label-width="formLabelWidth"
          prop="HBusinessType"
        >
          <el-select v-model="form.HBusinessType" placeholder="请选择业务类型">
            <el-option
              v-for="item in businessOptions"
              :key="item.BID"
              :label="item.BNAME"
              :value="item.BVALUAE"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitBusinessType">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import {
//   house_list,
//   yanziCheck,
//   houseBack,
//   turnSignIn,
// } from "@/api/jgqd/baseInfo";
// import RoomInformation from "@/views/components/RoomInformation";
// import Yanzi from "@/views/components/Yanzi";
// import { mapGetters } from "vuex";
export default {
  name: "HouseList",
  // components: { Yanzi, RoomInformation },
  data() {
    return {
      pageNum: 1,
      pageSize: 15,
      total: 0,
      loading: false,
      width: "120px",
      houseList: [],
      queryParams: {
        EID: "",
        Doorplate: "",
        listRows: 10,
        page: 1,
        HMultipleShop: "",
        PropertyRight: "",
        HDistrict: "",
        EPurpose: "",
        FormerRenter: "",
        startdate: "", //录入时间起#时间格式:Y-m-d
        enddate: "", //录入时间止#时间格式:Y-m-d
      },
      oldQueryParams: {},
      signUpTime: undefined, //签约日期
      currentRow: 0,
      currentHID: "",
      disabled: true,
      form: {
        HBusinessType: "",
      },
      curRow: {}, //选中的当前行内容
      dialogFormVisible: false,
      formLabelWidth: "120px",
      businessOptions: [
        { BID: "1", BNAME: "置换 ", BVALUAE: "01" },
        { BID: "2", BNAME: "回购 ", BVALUAE: "02" },
        { BID: "3", BNAME: "收购 ", BVALUAE: "03" },
        { BID: "4", BNAME: "代理 ", BVALUAE: "04" },
        { BID: "14", BNAME: "区管 ", BVALUAE: "09" },
      ],
      rules: {
        HBusinessType: [
          { required: true, message: "请选择转换类型", trigger: "change" },
        ],
      },
      shopDisabled: false, //连锁店搜索权限
    };
  },
  // computed: {
  //   ...mapGetters([
  //     "dict_multiple_shop", //连锁店
  //     "dict_district", //区域
  //     "dict_property_right", //产别
  //     "dict_money_type",
  //     "shopID",
  //     "role",
  //     "dict_evaluate_purpose", //估价目的
  //     "uuid",
  //   ]),
  // },
  // created() {
  //   if (this.uuid == "159" || this.uuid == "462") {
  //     // 张桂媛、张茜
  //     this.shopDisabled = false;
  //   } else {
  //     this.shopDisabled = this.role.some((el) => {
  //       return el.id == "43";
  //     });
  //   }
  //   if (this.shopDisabled) {
  //     this.queryParams.HMultipleShop = this.shopID;
  //   }
  // },
  // mounted() {
  //   let hasQuery = JSON.parse(sessionStorage.getItem("gjywListQuery"));
  //   if (hasQuery && hasQuery.listRows) {
  //     this.pageSize = hasQuery.listRows;
  //     this.pageNum = hasQuery.page;
  //     this.signUpTime = [hasQuery.startdate, hasQuery.enddate];
  //     this.queryParams = hasQuery;
  //   }
  //   this.getHouseList();
  // },
  methods: {
    //跳转到添加房源列表
    linkTo(){
       this.$router.push({
          path: "/nested/menu1/menu1-3",
        });
    },
    //打印估价单
    printPaper() {
      this.$router.push({
        path: "/ValuationSingle/ValuationSingle",
        query: { HID: this.currentHID },
      });
    },
    //确定是否验资通过=》跳转估计资料A页面
    // checkYz() {
    //   if (this.currentHID) {
    //     if (this.curRow.PropertyRight == "公产") {
    //       yanziCheck({ HID: this.currentHID })
    //         .then((res) => {
    //           if (res.success) {
    //             //跳转估价资料A页面
    //             this.$router.push({
    //               path: "/JgqdBaseInfo/evaluateA",
    //               query: { HID: this.currentHID },
    //             });
    //           } else {
    //             this.msgError(res.msg);
    //           }
    //         })
    //         .catch(() => {});
    //     } else {
    //       this.$router.push({
    //         path: "/JgqdBaseInfo/evaluateA",
    //         query: { HID: this.currentHID },
    //       });
    //     }
    //   } else {
    //     this.msgError("请先选中要查看的房源");
    //   }
    // },
    //修改房源
    getRoomsInfo() {
      this.$nextTick(() => {
        this.$refs["room"].openDialog(this.currentHID);
      });
    },
    //详细
    viewDetail() {
      if (this.currentHID) {
        this.$router.push({
          path: "/JgqdBaseInfo/JgqdBaseInfoDetail",
          query: { HID: this.currentHID },
        });
      } else {
        this.$notify({
          title: "提示",
          message: "请先选中要查看的房源",
          type: "warning",
        });
      }
    },
    //房间资料关闭
    changeRoomInformationState() {
      this.disabled = false;
    },
    //单选
    handleSelectionChange(val) {
      this.currentHID = val.HID;
      this.curRow = val;
      this.disabled = false;
    },
    //筛选
    handleQuery() {
      // this.pageNum = 1;
      let data = this.queryParams;
      data.listRows = this.pageSize;
      data.page = this.pageNum;
      data.startdate = this.signUpTime ? this.signUpTime[0] : "";
      data.enddate = this.signUpTime ? this.signUpTime[1] : "";
      sessionStorage.setItem("gjywListQuery", JSON.stringify(data));
      this.getHouseList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      // this.queryParams.HMultipleShop = this.shopID;
      this.signUpTime = "";
      this.handleQuery();
    },
    // handleEdit(row, type) {
    //   this.currentRow = row;
    //   if (type == "change") {
    //     this.dialogFormVisible = true;
    //     this.form.HBusinessType = "";
    //   } else if (type == "back") {
    //     this.$confirm("确实要退回该房源吗?", "提示", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     })
    //       .then(() => {
    //         houseBack({ HID: row.HID })
    //           .then((res) => {
    //             if (res.success) {
    //               this.getHouseList();
    //               this.msgSuccess("退回操作成功！");
    //             }
    //           })
    //           .catch(() => {
    //             this.msgError("退回失败！");
    //           });
    //       })
    //       .catch(() => {
    //         this.$message({
    //           type: "info",
    //           message: "已取消退回操作",
    //         });
    //       });
    //   }
    // },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getHouseList();
    },
    // getHouseList(type) {
    //   let data = {};
    //   if (type) {
    //     data = this.oldQueryParams;
    //   } else {
    //     data = this.queryParams;
    //     data.listRows = this.pageSize;
    //     data.page = this.pageNum;
    //     data.startdate = this.signUpTime ? this.signUpTime[0] : "";
    //     data.enddate = this.signUpTime ? this.signUpTime[1] : "";
    //     this.loading = true;
    //   }
    //   house_list(data)
    //     .then((res) => {
    //       this.loading = false;
    //       if (res.success) {
    //         this.houseList = res.data.data;
    //         this.total = res.data.total;
    //       } else {
    //         this.msgError(res.msg);
    //       }
    //     })
    //     .catch(() => {
    //       this.loading = false;
    //     });
    // },
    //验资查询
    searchSignIn() {
      this.$refs["yanzi"].searchSignIn(this.currentHID);
    },
    //业务转换
    // submitBusinessType() {
    //   if (!this.form.HBusinessType) {
    //     this.msgError("请选择业务类型！");
    //     return;
    //   } else {
    //     turnSignIn({
    //       HID: this.currentRow.HID,
    //       HBusinessType: this.form.HBusinessType,
    //       PropertyRight: this.currentRow.PropertyRight,
    //       BState: this.currentRow.BState,
    //       State: this.currentRow.State,
    //     })
    //       .then((res) => {
    //         this.dialogFormVisible = false;
    //         if (res.success) {
    //           this.getHouseList();
    //           this.msgSuccess("业务转换成功！");
    //           this.resetForm("businessChange");
    //         } else {
    //           this.msgFormsWarning(res.data);
    //         }
    //       })
    //       .catch(() => {});
    //   }
    // },
  },
};
</script>